<template>
	<view class="makeAppointment">		
	<view class="makeAppointment_item1" v-if="Appointment.length==0">
		<wanl-empty text="你还没有预约安装哦!"></wanl-empty>
	</view>
		<view class="makeAppointment_item" v-for="(item,index) in Appointment" :key="index">
			<view class="makeAppointment_item_title" v-if="item.appt_status==1">待安装</view>
			<view class="makeAppointment_item_title" v-if="item.appt_status==2">安装已完成</view>
			<view class="makeAppointment_item_demo" v-for="(good,set) in item.goods">
				<view class="makeAppointment_item_demo_left">
					<view class="image">
						<image :src="$wanlshop.oss(good.image, 70, 70)" mode="aspectFill"></image>
					</view>
					<view class="conter">{{good.title}}</view>
				</view>
				<view class="number">×{{good.number}}</view>
			</view>
			<view class="makeAppointment_item_make">
				<view class="name2">{{item.appttime}}</view>
			</view>
		</view>		
	</view>
</template>

<script>
	import wanlEmpty from '../../../components/wanl-empty/wanl-empty.vue'
	export default {
		data() {
			return {
				Appointment:[]
			};
		},
		components:{
			wanlEmpty
		},
		methods:{
			// 获取预约安装的数据
			getMake(){
				this.$api.get({
					url: '/wanlshop/product/getApptList',
					data: {
						// appt_status:1
					},
					success: res => {
						this.Appointment=res.data;
						console.log('res', res)
						
					}
				});
			}
		},
		onLoad() {
			this.getMake();
		}
	}
</script>

<style lang="scss">
	page{
	background-color: #f0f0f0;	
	}
.makeAppointment{
	&_item1{
		color: #808080;
	}
	&_item{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 700rpx;
		// height: 400rpx;
		margin: 15rpx auto;
		padding: 20rpx 0 10rpx;
		box-sizing: border-box;
		&_title{
			font-size: 26rpx;
			color: #7d7d7d;
			// background-color: pink;
			text-align: right;
			margin-right: 20rpx;
		}
		&_demo{
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background-color: pink;
			padding: 10rpx 20rpx 20rpx;
			box-sizing: border-box;
			// border-bottom: 1px solid #d2d2d2;
			&_left{
				display: flex;
				align-items: center;
				.image{
					width: 100rpx;
					height: 100rpx;
					// background-color: #4CD964;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
				}
				.conter{
					font-size:24rpx ;
					color: #282828;
					width: 450rpx;
					// background-color: red;
					margin-left: 15rpx;
					// 多行显示超出部分显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					word-break: break-all;
				}
			}
			.number{
				font-size: 24rpx;
				 color: #282828;
				// background-color: #007AFF;
			}
		}
		&_make{
			// background-color: pink;
			display: flex;
			justify-content: flex-end;
			view{			
				// width: 180rpx;
				// height: 50rpx;
				// line-height: 50rpx;
				// border-radius: 50rpx;
				text-align: center;
				font-size: 24rpx;
				color:#7d7d7d;
				// background-color: pink;
				margin: 0 20rpx 10rpx;
			}
			.name1{
				// background-color:#ff3200;
			}
			.name2{
				// background-color:#d2d2d2;
			}
		}
	}
}
</style>
